<template>
    <div class="home">
<!--        <img alt="Vue logo" src="../assets/logo.png">-->
        <div>{{msg}}</div>


        <div>
            <p v-text="msg+1" id="textBox">这里是个段落</p>
            <h2>----------------------------------</h2>
            <p v-my-text="msg+234567891" id="textBox2">这里是个段落</p>


            <h2>-----------v-html-------------</h2>
            <p v-html="msg2">你好世界</p>
            <h2>---------------v-show-------------------</h2>
            <p v-if="showFlag">你好世界</p>
            <p v-my-show="showFlag">你好世界</p>
            <button @click="changeShowFlag">switchShow</button>
        </div>
        <div>
            <h2>===========================================</h2>
            <tabNav></tabNav>
        </div>
    </div>
</template>

<script>

// vue中常见指令
// v-if
// v-show
// v-for
// v-model
// v-bind => :
// v-on => @
// v-html
// v-text
// v-once

import tabNav from "./tabNav"

export default {
    name: 'Home',
    components:{
        tabNav
    },
    directives:{
        /*"指令名":{//配置

        }*/
        /*myText:{
            bind(el, binding){
                el.innerText = binding.value
            }
        }*/
        myShow: {
            bind(el, binding){
                console.log("myShow====>bind====>",binding)
                el.style.display = binding.value?"block":"none"
            },
            update(el, binding, vnode, oldVnode){
                console.log("myShow====>update====>",binding);
                el.style.display = binding.value?"block":"none"
            },
        },
        //在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
        /*Vue.directive('myShow', function (el, binding) {
            el.style.display = binding.value?"block":"none"
        })*/
        /*myShow:function (el, binding){
            el.style.display = binding.value?"block":"none"
        }*/
    },
    data(){
        return{
            msg: "hello vue",
            msg2: "<i>haha</i>",
            showFlag: false,
            list: [
                "哈哈",
                "呵呵",
                "嘻嘻",
                "嘿嘿",
            ]
        }
    },
    methods:{
        changeShowFlag(){
            this.showFlag = !this.showFlag
        }
    },
    created() {

    },
    beforeMount() {

        console.log(document.getElementById("textBox"))
    },
    mounted() {
       /* console.log(this.$data)

        let textBox = document.getElementById("textBox");
        textBox.innerText = this.msg*/
    }
}
</script>
